<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<form>
    <p>
        账号：<input type="text" name="user">
    </p>
    <p>
        密码：<input type="text" name="pass">
    </p>
    <p>
        邮箱：<input type="text" name="email">
    </p>
</form>

<button class="btn">获取数据</button>

<script>
// FormData
// FormData提供了一种使用键值对来表示表单数据的方式
// FormData用于收集表单数据（键值对格式）

// FormData的使用：
// 1.用于序列化表单数据（键值对格式）
// 2.用于上传文件

/* // 创建FormData对象
let fd = new FormData()
// console.log( fd )// FormData {}

// append(key,val)方法用来追加数据
fd.append('name','小王')
fd.append('name','大王')
fd.append('hehe','呵呵')

// get(key)方法用于读取key的第一个值
// getAll(key)方法用于读取key的所有值
console.log( fd.get('name') )// 小王
console.log( fd.getAll('name') )// ['小王', '大王']

// set(key,val)方法用于设置一个key的值（会覆盖原来的值）
// fd.set('name','老王')
// console.log( fd.getAll('name') )// ['老王']

// has(key)方法用于判断key是否存在
console.log( fd.has('name') )// true
console.log( fd.has('hehe') )// true
console.log( fd.has('haha') )// false

// delete(key)方法用于删除key
fd.delete('hehe')
console.log( fd.has('hehe') )// false */


// 正常情况下，我们想要获取form中每一个输入框的值
// 先获取输入框元素，然后获取它们的value

let btn = document.querySelector('.btn')
btn.onclick = function (){
    // 获取form元素
    let form = document.querySelector('form')
    // 创建FormData对象
    let formdata = new FormData(form)
    console.log( formdata.get('user') )
    console.log( formdata.get('pass') )
    console.log( formdata.get('email') )
}


</script>
</body>
</html>